<template>
  <div class="child">
    <h1>我是Child组件</h1>
    <h2>我有一个玩具：{{toy}}</h2>
    <button @click="handleClick">把玩具给父亲玩玩</button>
    <button @click="handleClick2">把电脑给父亲用用</button>
    <button @click="handleClick3">解绑我身上的send-toy事件</button>
  </div>
</template>

<script>
  export default {
    name:'Child',
    data() {
      return {
        toy:'奥特曼',
        computer:'联想'
      }
    },
    methods: {
      handleClick(){
        // 触发了Child组件实例对象（vc）的send-toy事件
        this.$emit('send-toy',this.toy,666,777,888)
      },
      handleClick2(){
        // 触发了Child组件实例对象（vc）的send-computer事件
        this.$emit('send-computer',this.computer)
      },
      handleClick3(){
        this.$off('send-toy')
        // this.$off() //这是解绑Child实例上的所有自定义事件
      }
    },
  }
</script>

<style>
  .child{
    background-color: orange;
    padding: 20px;
    box-shadow: 0 0 10px black;
    border-radius: 10px;
  }
  button{
    font-size: 30px;
  }
</style>